import axios from "axios";
import React, { Component } from "react";  
import './index.css';
export default class Weathwer extends Component {
    state = {
        wea:[            
        ]
    }
    render (){
        return(<div>
                <h2>天气查询</h2>
                <div>
                    <input type="text" ref = {el =>this.input = el}/>
                   < button onClick  = {this.queryWea}>点击查询天气</button>
                </div>
                <hr/>
                <div className = "result">
                    <ul>
                      {
                          this.state.wea.map(item=>{
                              return <li key = {item.date}>{item.date}--{item.wea}</li>
                          })
                      }                      
                    </ul>
                 </div>
            </div>)
    }
 queryWea = async () =>{
     //获取城市名称
     let cityName = this.input.value;
     //拼接url
     let url = 'http://www.tianqiapi.com/api/?veision=v1&city='+cityName+'&appid=23941491&appsecret=TXoD5e8P'
     //发送请求
     let result = await axios (url);
     this.setState({
         wea:result.data.data//响应体
     })
 }
}